<template>
	<view class="commodityManagement">
		<view class="inputValueBox">
			<u--input focus v-model="valueData" customStyle="background: #FFFFFF;" @confirm="on_confirm" shape="circle"
				:adjustPosition="false" border="true" fontSize="14px" placeholder="搜索ID/手机号" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
		</view>

		<view class="table">
			<view class="list" v-for="item in tableList" :key="item.id">
				<view class="user">
					<image :src="item.avatar" class="head-img" />
					<view class="u-data">
						<view class="username">{{ item.nickname }}</view>
						<view class="txt">
							<text>ID：{{ item.user_id }}</text>
							<text>手机号码：{{ item.mobile }}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="on_edit(item)">晋升团长</view>
			</view>
			<!-- <t-table @change="change">
                <t-tr>
                    <t-th>ID</t-th>
                    <t-th>商品名称</t-th>
                    <t-th>库存</t-th>
                    <t-th>状态</t-th>
                </t-tr>
                <t-tr v-for="item in tableList" :key="item.id">
                    <t-td>{{ item.id }}</t-td>
                    <t-td>{{ item.name }}</t-td>
                    <t-td>
                        <view @click="on_edit(item)" style="color:#1890ff">{{ item.stock }}</view>
                    </t-td>
                    <t-td>
                        <u-tag @click="on_type(item)" size="mini" :type="item.status == 0 ? 'error' : 'success'"
                            :text="item.status == 0 ? '下架' : '上架'"></u-tag>
                    </t-td>
                </t-tr>
            </t-table> -->
		</view>
		<view class="pagination">
			<uni-pagination @change="on_change" :total="total"></uni-pagination>
			<view class="example">
				<text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
			</view>
		</view>

		<u-modal @confirm="on_operation(1)" @cancel="on_operation(2)" :showCancelButton="true" :show="showType"
			title="团长审核">
			<view class="slot-content">
				<radio-group class="radioData">
					<view class="radio">
						<radio value="1" :checked="form.status == 2" @click="Status(2)" />审核通过
					</view>
					<view class="radio">
						<radio value="2" :checked="form.status == 1" @click="Status(1)" />审核不通过
					</view>
				</radio-group>
				<view class="data" v-if="form.status == 1">
					拒绝原因：<input type="text" v-model="form.reason" class="input-txt" placeholder="请说明拒绝原因"
						placeholder-class="p-input" />
				</view>
				<!-- <view class="input" v-for="item in specificationsList" :key="item.id">
                    <view>{{ item.good_style }}：</view>
                    <view class="valueName">
                        <u--input type="number" placeholder="请输入库存" border="surround" v-model="item.stock"></u--input>
                    </view>
                </view> -->
			</view>
		</u-modal>
		<u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)"
			:loading="loadingType"></u-loading-page>
	</view>
</template>

<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
	components: {
		tTable,
		tTh,
		tTr,
		tTd
	},
	data() {
		return {
			loadingType: false,
			specificationsList: [],
			page: 1,
			total: 0,
			value: '',
			showType: false,
			valueData: '',
			tableList: [
			],
			name: 0,
			form: {
				id: 0,
				user_id: 0,
				status: 2,
				reason: ''
			},
			showBtn: true, //可点击状态
		};
	},
	onShow() {
		this.ajax_goodsList()
	},
	methods: {
		ajax_goodsList() {
			this.loadingType = true;
			let form = { page: this.page }
			if (this.name != 0) {
				form = {
					page: this.page,
					id: this.name
				}
			}
			this.$request.request({
				url: 'user/promotionToHeadList',
				method: 'post',
				data: form
			}).then(res => {
				console.log(res);
				this.tableList = res.data.list.data
				this.total = res.data.list.total
				this.loadingType = false
			}).finally(() => {
				this.loadingType = false
			})
		},
		on_change(page) {
			this.page = page.current
			this.ajax_goodsList()
		},
		on_operation(index) {
			// if (!this.showBtn) {
			// 	return false;
			// }
			// this.showBtn = false;
			if (index == 1) {
				console.log(this.form)
				uni.showLoading({
					title: '加载中···',
					mask: true
				})
				this.$request.request({
					url: 'user/promotionToHead',
					method: 'post',
					data: this.form
				}).then(res => {
					uni.showToast({ title: '审核成功', icon: 'none' })
					this.showType = false
					this.ajax_goodsList()
					uni.hideLoading();
					setTimeout(() => {
						this.showBtn = true;
					}, 3000)
				}).finally(() => {

				})
			}
			if (index == 2) {
				this.showType = false
			}
		},
		on_confirm(e) {
			console.log(e)
			this.page = 1
			this.name = e;
			this.ajax_goodsList()
		},
		on_edit(item) {
			console.log(item)
			this.form.id = item.id;
			this.form.user_id = item.user_id;
			this.form.reason = '';
			this.form.status = 2;
			this.showType = true;
		},
		Status(val) {
			this.form.status = val;
		}
	},
};
</script>
<style lang="scss" scoped>
page {
	background-color: #F2F4F4;
	height: 100vh;
}

.commodityManagement {
	padding: 20rpx;

	.slot-content {
		width: 100%;
		margin-top: 10rpx;

		.radioData {
			display: flex;
			justify-content: flex-start;

			.radio {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;

				radio {
					margin-left: 68rpx;
				}
			}
		}

		.data {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;
			font-size: 28rpx;

			input {
				border: 1rpx solid #F2F4F4;
				padding-left: 10rpx;
				height: 60rpx;
				width: 72%;
				border-radius: 8rpx;
				font-size: 28rpx;
			}

			.p-input {
				font-size: 28rpx;
			}
		}
	}

	.input {
		width: 100%;
		margin-top: 20rpx;

		.valueName {
			margin-top: 10rpx;
		}
	}

	.input:nth-child(1) {
		margin-top: 0;
	}

	.list {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-bottom: 2rpx solid #F2F4F4;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.head-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.u-data {
				display: flex;
				flex-direction: column;

				.username {
					font-size: 30rpx;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					max-width: 80%;
				}

				.txt {
					display: flex;
					flex-direction: column;
					color: #999999;
					font-size: 24rpx;

					text {
						margin-top: 6rpx;
					}
				}
			}
		}

		.btn {
			background-color: #1296DB;
			font-size: 26rpx;
			color: #FFFFFF;
			padding: 8rpx 16rpx;
			border-radius: 24rpx;
			white-space: nowrap;
		}
	}

	.list:first-child {
		border-radius: 12rpx 12rpx 0 0;
	}

	.list:last-child {
		border-radius: 0 0 12rpx 12rpx;
	}
}

.pagination {
	padding: 0 12rpx;
}

::v-deep .uni-pagination__btn {
	background-color: #FFFFFF !important;
	opacity: 0.8;
	padding: 0 30rpx;
}

::v-deep .uni-pagination__child-btn {
	color: #000000 !important;
	font-weight: 700;
}

::v-deep uni-radio .uni-radio-input {
	width: 40rpx;
	height: 40rpx;
}</style>